<template>
    <div>
        <el-container>
            <el-main>
                <div class="MenS">男厕</div>
                <div class="content-warp">
                    <toiletItem
                        v-for="(item, index) in MenSData"
                        :key="index"
                        :data="item"
                    >
                    </toiletItem>
                </div>
                <div class="ladies">女厕</div>
                <div class="content-warp">
                    <toiletItem
                        v-for="(item, index) in MenSData"
                        :key="index"
                        :data="item"
                    >
                    </toiletItem>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import toiletItem from "./toiletItem.vue";
import { getRestroomList } from "@/api/scene/index";
export default {
    components: {
        toiletItem,
    },
    name: "toilet",
    data() {
        return {
            MenSData: [
                {
                    name: "上班",
                    type: 0,
                    img: require("@/assets/scene/alarm.png"),
                },
                {
                    name: "下班",
                    type: 1,
                    img: require("@/assets/scene/alarm.png"),
                },
                {
                    name: "午休",
                    type: 1,
                    img: require("@/assets/scene/alarm.png"),
                },
                {
                    name: "打开窗帘",
                    type: 1,
                    img: require("@/assets/scene/alarm.png"),
                },
                {
                    name: "上班",
                    type: 0,
                    img: require("@/assets/scene/alarm.png"),
                },
                {
                    name: "下班",
                    type: 1,
                    img: require("@/assets/scene/alarm.png"),
                },
                {
                    name: "午休",
                    type: 1,
                    img: require("@/assets/scene/alarm.png"),
                },
                {
                    name: "打开窗帘",
                    type: 1,
                    img: require("@/assets/scene/alarm.png"),
                },
            ],
        };
    },
    created() {},
    mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            const { data: responseData } = await getRestroomList();
            const { code, data, msg } = responseData;
            if (code == 200) {
                this.MenSData = data;
            } else {
                this.$message.error(msg);
            }
            console.log(data);
        },
    },
};
</script>
<style lang="scss" scoped>
.MenS {
    background-color: #9bc2e6;
    padding: 5px;
    text-align: center;
    width: calc(100% - 10px);
}
.content-warp {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}
.ladies {
    background-color: #f4b084;
    padding: 5px;
    text-align: center;
    margin-top: 20px;
    width: calc(100% - 10px);
}
</style>
